<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器</title>
    <style>
    main{
        width:800px;
        height:200px;
        margin:100px auto;
        
    }
    input{
        width:200px;
        height:40px;
        text-align:center;
    }

    </style>
</head>
<body>
    <main>
        <input class="hour" type="text" value="">
        <span>时</span>
        <input class="minute" type="text" value="">
        <span>分</span>
        <input class="second" type="text" value="">
        <span>秒</span>
        <button class="start" type="button">开始</button>
    </main>
</body>
</html>
<script>
    var m =document.querySelector(".minute");
    var s =document.querySelector(".second");
    // console.log(s);
    var start =document.querySelector(".start")
    console.log(m.value);
     function clock(){
         if(m.value==0&&s.value==0){
             clearInterval(timer);
             document.writeln("计时结束");
         }
         if(m.value==0&&s.value!=0&& s.value >=0){
              s.value=s.value-1;
         }
         if(m.value!=0&&m.value>=0&&s.value==0){
             s.value=59;
             m.value=m.value-1;
         }
         if(m.value!=0&&s.value!=0&&s.value>=0){
            s.value=s.value-1;
             }
         }
    start.onclick =function(){
          clock();
          console.log(s.value);
          var timer=setInterval(clock,1000);
    }
   
     
     
</script>